<template>
    <div class="app-container">
           <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="90px">
            <el-form-item label="学期" prop="type">
              <el-date-picker 
                style="margin-right: 20px;"
                   v-model="value"
                   type="year"
                   value-format="yyyy"
                   :picker-options="pickerOptions"
                   :editable="false"
                   placeholder="请选择年">
                 </el-date-picker>
                 <el-radio-group v-model="xq">
                   <el-radio :label="1">上</el-radio>
                   <el-radio :label="2">下</el-radio>
                 </el-radio-group>
            </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item> 
         </el-form>
         <div class="charts" v-if="clicktabs='图表'"  >
            <!-- <div  ref="myChartdom" class="chartdom"></div> -->
          <div ref="myChartdom1" class="chartdom1"></div>
          </div>
    </div>

</template>
<script>
import { selectSemster} from "@/api/base/semster";
import { getcountBySemester} from "@/api/qu/qyjbglyj";
import moment from "moment";
export default {
  name: "StudentCheck",
  data() {
    return {
      //学期
      semsterList: [],
      pickerOptions: {
              disabledDate(time) {
                return time.getTime() > Date.now();
              },  
            },
      open: false,
      // 查询参数
      queryParams: {
        semId:''
      },
      xq:1,
      value:new Date(),
      myCharts:null,
      sickenList:[
        {name:'累计疾病',value:250},
        {name:'现有疾病',value:100},
        {name:'新增疾病',value:100}
      ],
      myCharts1: null,
    };
  },
  created() {
    this.getList();
    this.getTime(this.xq)
  },
  mounted(){
    //  this.myCharts = this.$echarts.init(this.$refs.myChartdom);
     this.myCharts1 = this.$echarts.init(this.$refs.myChartdom1);
     window.addEventListener("resize", this.monitorResize);
   },
  methods: {
     async getList(){
      this.getTime(this.xq)
      try {
        const obj ={
          startDate:this.startDate,
          endDate:this.endDate
        }
         const data= await  getcountBySemester(obj);
         this.sickenList=data;
        //  this.myChartsFn();
         this.myChartsFn1();
      } catch (error) {
         console.log(error);
      }
    },
    getTime(flag){
          if(flag=='1'){
              this.startDate=moment(this.value).format("YYYY")+'-09-01';
              this.endDate= moment(this.value).add(1, "year").format("YYYY")+'-01-31';
          }else{
              this.startDate=moment(this.value).add(1, "year").format("YYYY")+'-02-01';
              this.endDate= moment(this.value).add(1, "year").format("YYYY")+'-08-01';
          }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.xq=1,
      this.value=new Date(),
      this.handleQuery();
    },
    //详情
    handleDetails(){
      this.open=true;
    },
    submitForm(){
      this.open=false;
    },
    // myChartsFn(){
    //   const  option = {
    //     title: {
    //          text: '整体患病情况',
    //         //  subtext: 'Fake Data',
    //          left:'left'
    //        },
    //       xAxis: {
    //         type: 'category',
    //         data: this.sickenList.map((item) => item.name)
    //       },
    //       yAxis: {
    //         type: 'value'
    //       },
    //       tooltip: {
    //        trigger: 'axis'
    //      },
    //       toolbox: {
    //            show: true,
    //            feature: {
    //              saveAsImage: { show: true , title: '下载'}
    //            }
    //          },
    //       series: [
    //         {
    //           data: this.sickenList.map((item) => item.value),
    //           type: 'line'
    //         }
    //       ]
    //     };
    //        // 使用刚指定的配置项和数据显示图表
    //        this.myCharts.setOption(option,true);
    //        window.addEventListener("resize", this.monitorResize);
    //  },
     //柱状图
    myChartsFn1() {
      const option = {
        // backgroud:'#333',
        title: {
          text: '整体患病情况',
          left: 'left',
           subtext: '单位：人',
           subtextStyle:{
            color:'#000'
           }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true, title: '下载' }
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {//x轴文字的配置
              show: true,
              interval: 0,//使x轴文字显示全
            },
            // data:this.echartList.map((item) => item.name)
            data: this.sickenList.map((item) => item.name)
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        color: ['#2f89cf', '#27d08a'],
        series: [
          {
            name: '患病整体情况',
            type: 'bar',
            // stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            barWidth: 80,
            label: {
              show: true,
              position: 'inside',
              fontSize: 15
            },
            // data: this.echartList.map((item) => item.value),
            data: this.sickenList.map((item) => item.value),
          },
        ]
      }
      // 使用刚指定的配置项和数据显示图表
      this.myCharts1.setOption(option, true);
      window.addEventListener("resize", this.monitorResize);
    },
      //地图监听窗口缩放事件
      monitorResize(){
      //  this.myCharts.resize();
       this.myCharts1.resize();
     },
  }
};
</script>
<style lang="scss" scoped>
.charts{
    width: 100%;
    height:840px;
    .chartdom{
        width: 65%;
        height: 80%;
        margin-bottom: 30px;
    }
    .chartdom1 {
    width: 45%;
    height: 50%;
    margin-bottom: 30px;
  }
}
</style>